<!--  -->
<template>
   <el-dialog
    v-model="dialogVisible"
    title="添加角色"
    width="600"
    :before-close="handleClose"
  >
  <el-form class="form" ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules" label-width="auto">
    <el-form-item label="角色名" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="权限" prop="menus">
    <div style="height:300px;overflow-y: auto;width:100%">
        
  
        <el-tree
    ref="treeRef"
    @check-change="handleChange"
    style="max-width: 600px"
    :data="menus"
    show-checkbox
    default-expand-all
    node-key="id"
    highlight-current
    :props="defaultProps"
  />
</div>
    </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup>
import { Role } from '../../service/role/type';
import { getMenuList,add } from '../../service/role/role';
import { reactive,defineEmits,ref,onMounted,defineProps} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import  {ElMessage } from 'element-plus'

const props=defineProps({
    editData:{
        type:Object
    }
})

const dialogVisible = ref(true)
const emit=defineEmits(["close"])

const treeRef=ref<any>();
 const ruleFormRef = ref<FormInstance>()

const roleid=ref(0);

const ruleForm = reactive<Role>({
    id:0,
  name: '',
  menus:[]
})


const rules = reactive<FormRules<Role>>({
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ],
  menus:[
    { required: true, message: '请选择权限', trigger: 'change' }
  ],
})

const handleClose = (done: () => void) => {

    emit("close");
   
}

const handleChange=()=>{
    var ids= treeRef.value.getCheckedKeys();
  ruleForm.menus=  ids.map((item:any)=>({id:item}));
}
const postData=async ()=>{

     const res:any =await add(ruleForm);
     console.log(res);
     
     if(res.errCode===10000){

        emit("close",true);
     }
     else{
      ElMessage.error(res.errMsg)
     }

}
const submit=()=>{


    ruleFormRef.value?.validate((valid)=>{
        if(valid){
            postData();
        }

    })
    



//    console.log(ids);


//    treeRef.value.setCheckedKeys([72,74])
   
   
}

const getTreeCheckedId=(list:any[])=>{

  let idArr:any[]=[];
  list.forEach(item=>{
  
      if(item.checked==1){
        idArr.push(item.id);
      }
      if(item.children?.length){
        
        idArr=[...idArr,...getTreeCheckedId(item.children)];
      }

  })

  return idArr;


}

const defaultProps={label:"name"};
const menus=ref([]);

const getMenuData=async ()=>{
    const res:any=await getMenuList(ruleForm.id);
    console.log(res.data.list);
    
    if(res.errCode===10000){
        menus.value=res.data.list;

        let ids:any=getTreeCheckedId(res.data.list);

        ruleForm.menus=  ids.map((item:any)=>({id:item}));

        
        
        treeRef.value.setCheckedKeys(ids)
    }

// treeRef.value.setCheckedKeys([72,74])
   
}



onMounted(()=>{

    ruleForm.id=Number(props.editData!.id);
    ruleForm.name=props.editData!.name;
    getMenuData();

    


})
</script>
<style scoped>
.form{
    padding: 30px 50px;
}
</style>